<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="shortcut icon" href="/static/images/favicon.ico">
  <link rel="stylesheet" href="/static/css/bulma.min.css">
  <link rel="stylesheet" href="/static/css/base.css">
  <title>Python Web 全栈作品</title>
</head>
<body>
  <header>
    <nav class="navbar has-shadow is-spaced" role="navigation" aria-label="dropdown navigation">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item" href="/">
            <figure class="image is-24x24 mr-2">
              <img src="/static/images/python-logo.png" alt="python-logo">
            </figure>
            <span class="is-size-4">Python Web 全栈作品</span>
          </a>
          <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
        </div>
        <div class="navbar-menu" id="navbarMenu">
          <div class="navbar-start">
            <a class="navbar-item" href="/notes">
              <span class="icon has-text-link">
                <i class="far fa-sticky-note"></i>
              </span>
              <span>云笔记</span>
            </a>
            <a class="navbar-item" href="/images">
              <span class="icon has-text-primary">
                <i class="far fa-images"></i>
              </span>
              <span>在线图床</span>
            </a>
            <a class="navbar-item" href="/messages">
              <span class="icon has-text-success">
                <i class="fas fa-comment-dots"></i>
              </span>
              <span>留言板</span>
            </a>
            <a class="navbar-item" href="/about">
              <span class="icon has-text-info">
                <i class="fas fa-info-circle"></i>
              </span>
              <span>项目介绍</span>
            </a>
          </div>
          <div class="navbar-end">
            {% if session.username %}
            <div class="navbar-item has-dropdown is-hoverable">
              <a class="navbar-link">
                <span class="icon has-text-info">
                  <i class="far fa-user-circle"></i>
                </span>
                <span>{{ session.username }}</span>
              </a>
              <div class="navbar-dropdown">
                <a class="navbar-item" id="user_logout">退出登录</a>
              </div>
            </div>
            {% else %}
            <div class="navbar-item">
              <div class="buttons">
                <a class="button is-primary" href="/user/add">注册</a>
                <a class="button is-primary is-outlined" href="/user/login">登录</a>
              </div>
            </div>
            {% endif %}
          </div>
        </div>
      </div>
    </nav>
  </header>

  <main>
  {% block main %}
  {% endblock %}
  </main>

  <footer class="footer">
    <div class="container">
      <div class="content">
        <div class="columns">
          <div class="column is-9">
            <h1 class="title is-4">专选课《Web开发技术》大作业</h1>
            <p>用户登录系统配合session实现</p>
            <p>设计了五个板块：用户注册/登录/注销、云笔记、在线图床、留言板、项目介绍</p>
            <p>后端采用Python Flask方案，数据库使用SQLite3</p>
            <p>数据库的建立和操作均使用ORM方式，由Flask-SQLAlchemy提供</p>
            <p>前端UI使用纯CSS框架Bluma和图标库Font Awesome构建</p>
          </div>
          <div class="column is-3">
            <h4 class="title">相关链接</h4>
            <p>
              <a class="has-text-grey-dark" href="https://github.com/Mark-ThinkPad/web-homework"
                 target="_blank" rel="noopener norefferrer">
                <span class="icon">
                  <i class="fab fa-github"></i>
                </span>
                <span>GitHub</span>
              </a>
            </p>
            <p>
              <a class="has-text-grey-dark" href="https://gitee.com/Mark-ThinkPad/web-homework"
                 target="_blank" rel="noopener norefferrer">
                <span class="icon">
                  <img src="/static/images/gitee-logo.ico" alt="gitee-logo" width="16" height="16">
                </span>
                <span>Gitee</span>
              </a>
            </p>
            <p>
              <a class="has-text-grey-dark" href="https://flask.palletsprojects.com/en/1.1.x/"
                 target="_blank" rel="noopener norefferrer">
                <span class="icon">
                  <img src="/static/images/flask-icon.png" alt="flask-icon" width="16" height="16">
                </span>
                <span>Flask</span>
              </a>
            </p>
            <p>
              <a class="has-text-grey-dark" href="https://bulma.io/"
                 target="_blank" rel="noopener norefferrer">
                <span class="icon">
                  <img src="/static/images/bulma-logo.png" alt="bulma-logo" >
                </span>
                <span>Bulma</span>
              </a>
            </p>
            <p>
              <a class="has-text-grey-dark" href="https://fontawesome.com/"
                 target="_blank" rel="noopener norefferrer">
                <span class="icon has-text-info">
                  <i class="fab fa-font-awesome"></i>
                </span>
                <span>Font Awesome</span>
              </a>
            </p>
          </div>
        </div>
        <div>
          <span>&copy;2020 计科11704 周淦清 201703407</span>
        </div>
      </div>
    </div>
  </footer>

  <script defer src="/static/fonts/fontawesome-free-5.13.0-web/js/all.js"></script>
  <script src="/static/js/functions.js"></script>
  <script src="/static/js/base.js"></script>
  {% if session.username %}
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      $id('user_logout').addEventListener('click', function () {
        ajax({
          url: '/api/user/logout',
          type: 'POST',
          dataType: 'json',
          data: {},
          success: function (response) {
            if (response.success) {
              window.location.href = '/';
            } else {
              alert(response.message);
            }
          },
          fail: function (status) {
            alert('HTTP状态码: ' + status);
          }
        });
      })
    });
  </script>
  {% endif %}
  {% block js %}
  {% endblock %}
</body>
</html>